<script setup>
/**
 * change事件带出所有数据如下
 * @return {
    "appconfigId": "2",
    "appconfigDocName": "若依",
    "deptId": "105",
    "deptName": "测试部门"
}
 */
// import { GetAppConfigAPI } from '@/api/common/index.js'
const emit = defineEmits(['update:modelValue', 'clear', 'change'])
const props = defineProps({
  menuId: {
    type: String || Number,
    default: ''
  },
  modelValue: {
    type: String || Number,
    default: ''
  },
  option: {
    type: Array,
    default: []
  },
  disabled: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: '请选择'
  },
  isValue: {
    type: Boolean,
    default: false
  },
  clearable: {
    type: Boolean,
    default: true
  },
  size: {
    type: String,
    default: 'default'
  }
})
// 用户列表
const userList = ref([])
// 绑定数据
const data = ref('')
// 监听变化
watchEffect(() => {
  data.value = props.modelValue
})
// 监听变化
watch(
  () => props.modelValue,
  val => {
    data.value = val
  },
  { deep: true, immediate: true }
)
// 监听变化
watchEffect(() => {
  emit('update:modelValue', data.value)
})
// 监听变化
watchEffect(() => {
  emit('update:modelValue', data.value)
  const find = userList.value.find(t => t.appconfigId == data.value)
  if (find) {
    emit('change', find)
  }
})

// 事件改变 找出对应信息
const change = () => {}

const getUser = async () => {
  const { data: result } = await GetAppConfigAPI({ menuId: props.menuId })
  userList.value = result
}

watch(
  () => props.menuId,
  () => {
    if (props.menuId) {
      // getUser()
    }
  },
  {
    deep: true,
    immediate: true
  }
)
</script>

<template>
  <el-select
    filterable
    :disabled="props.disabled"
    :clearable="props.clearable"
    v-model="data"
    :placeholder="placeholder"
    @clear="emit('clear')"
    @change="change"
    :size="size"
  >
    <el-option :label="item.appconfigDocName" :value="item.appconfigId" v-for="item in userList" :key="item.value">
      <span style="float: left">{{ item.appconfigDocName }}</span>
      <span
        v-if="isValue"
        style="float: right; color: var(--el-text-color-secondary); font-size: 13px; margin-left: 15px"
        >{{ item.appconfigId }}</span
      >
    </el-option>
  </el-select>
</template>
<style scoped lang="scss"></style>
